<template>
  <div class="feedback" :style="{height:mainHeight+'px'}">
    <div class="content" :style="{height:contentHeight+'px',width:contentWidth+'px'}">
      <textarea maxlength="200"
                @change="txCount"
                @keyup="txCount"
                @keydown="txCount"
                placeholder="   请输入反馈内容" v-model="content"></textarea>
      <span>{{currCount}}/200</span>
    </div>
    <sub-button class="save-feedback" btn-text="提交反馈" @click.native="saveFeedback"></sub-button>
  </div>
</template>
<script>
  import SubButton from "@/components/SubButton";
  import {Toast} from 'vant';

  export default {
    data() {
      return {
        mainHeight: 0,
        contentWidth: 0,
        contentHeight: 0,
        currCount: 0,
        content: '',
      }
    },
    components: {
      SubButton
    },
    mounted() {
      //总屏幕高度
      this.mainHeight = window.innerHeight - 5;
      //输入框宽度
      this.contentWidth = window.innerWidth * 0.88;
      //输入框高度
      this.contentHeight = window.innerHeight * 0.23;
    },
    methods: {
      txCount() {
        let that = this;
        that.currCount = that.content.length
      },
      saveFeedback() {
        let that = this;
        if (that.content.length < 5) {
          // that.$notify(that.$setNT('反馈必须大于5个字').err);
          Toast.fail('反馈必须大于5个字');
          return;
        }

        let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
        let id = cook.userInfo.id;
        let param = {
          userId: id,
          content: that.content
        }
        that.$http.restPost('/userFeedBack.do', param).then(response => {
          console.log(response);
          if (response.data.result > 0) {
            // that.$notify(that.$setNT('发布成功').suc);
            Toast.success('发布成功');
            that.content = '';
            that.currCount = 0;
          } else {
            // that.$notify(that.$setNT('修改失败').err);
            Toast.fail('发布失败');
          }
        });
      }
    },
  }
</script>
<style lang="css" scoped>

  textarea::-webkit-input-placeholder {
    color: #BFBFBF;
    font-size: 14px;
  }

  .feedback {
    text-align: center;
    width: 100%;
  }

  .content {
    position: relative;
    padding: 0;
    top: 3%;
    margin: 0 auto;
  }

  .content > textarea {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 0;
    resize: none;
    width: 100%;
    height: 100%;
    font-size: 14px;
  }

  .content > span {
    position: absolute;
    bottom: 3%;
    right: 4%;
    font-size: 12px;
  }

  .save-feedback {
    position: relative;
    top: 20%;
  }


</style>
